<template>
  <div class="login">
    <!-- logo -->
    <div class="login-logo">
      <img src="../assets/logo.jpg" alt="">
    </div>
    <!-- 手机号 -->
    <input-group type="number" v-model="phone" placeholder="请输入手机号" :disabled="disabled" :btnTitle="btnTitle" :error="error.phone" class="login_phone" @btnClick="getVertifyCode"></input-group>

    <!-- 验证码 -->
    <input-group type="number" v-model="vertifyCode" :error="error.code" placeholder="请输入验证码" class="login_code"></input-group>

    <!-- 用户服务协议 -->
    <div class="login_des">
      <p>
        新用户登录即自动注册，表示已同意
        <span>《用户服务协议》</span>
      </p>
      <!-- 登录按钮 -->
      <div class="login-button">
        <button :disabled="isClick" @click="handleLogin">登录</button>
      </div>
    </div>
  </div>
</template>

<script>
import InputGroup from '../components/InputGroup.vue'

export default {
  name: 'MyLogin',
  components: {
    InputGroup
  },
  data() {
    return {
      // 电话号码
      phone: '',
      // 验证码
      vertifyCode: '',
      disabled: false,
      btnTitle: '获取验证码',
      // 错误信息
      error: {}
    }
  },
  computed: {
    // 控制登录按钮是否禁用
    isClick() {
      if (!this.phone || !this.vertifyCode) return true
      else return false
    }
  },
  methods: {
    // 点击了获取验证码按钮
    getVertifyCode() {
      // 发起网络请求
      if (this.validatePhone()) {
        this.$http.post('/api/posts/sms_send', {
          // sid: 'bb8d355b54182bbdf4126ff14fca3ff4',
          // token: '9924fba2223fddf21d86938ff2be165e',
          // appid: '65aeb6a6ec904bd1837af631b387bf4e',
          // templatedid: '',
          phone: this.phone
        }).then(res => {
          console.log(res)
          this.validBtn()
        })
      }
    },
    validBtn() {
      // 倒计时60秒
      let time = 60
      const timer = setInterval(() => {
        if (time === 0) {
          // 清除定时器
          clearInterval(timer)
          this.btnTitle = '获取验证码'
          this.disabled = false
        }
        else {
          this.btnTitle = '请在' + time + '秒后重试'
          this.disabled = true
          time--
        }
      }, 1000)
    },
    // 验证手机号 是否正确
    validatePhone() {
      if (this.phone === '') {
        this.error = {
          phone: '手机号不能为空'
        }
        return false
      }
      else if (!/^1[3456789]\d{9}$/.test(this.phone)) {
        this.error = {
          phone: '请填写正确的手机号'
        }
        return false
      }
      else {
        this.error = {}
        return true
      }
    },
    // 点击了登录按钮
    handleLogin() {
      // 发起网络请求
      this.$http.post('/api/posts/sms_back', {
        phone: this.phone,
        code: this.vertifyCode
      }).then(res => {
        this.error = {}
        sessionStorage.setItem('ele_login', res.data.user._id)
        this.$router.push('/home')
      }).catch(err => {
        this.error = {
          code: err.response.data.msg
        }
      })
    }
  }
}
</script>

<style lang="less" scoped>
.login {
  width: 100%;
  height: 100%;
  padding: 30px;
  box-sizing: border-box;
  background-color: #fff;
  text-align: center;
  .login-logo {
    text-align: center;
    img {
      width: 150px;
    }
  }
  .login_phone,
  .login_code,
  .login_des {
    margin-top: 20px;
  }
  .login_des {
    color: #aaa;
    line-height: 22px;
    font-size: 14px;
    padding: 0 35px;
    span {
      color: #4d90fe;
    }
  }
  .login-button {
    button {
      width: 100%;
      height: 40px;
      background-color: #48ca38;
      border-radius: 6px;
      color: #fff;
      font-size: 14px;
      outline: none;
      border: none;
    }
  }
  .login-button button[disabled] {
    background-color: #8bda81;
  }
}
</style>
